<template>
    <a-spin :spinning="loading">
        <div class="page-header-index-wide">

            <a-card  :bordered="false" :body-style="{padding: '12px'}">
                <a-row :gutter="24">
                    <a-col :sm="24" :md="5" :xl="5" :style="{ margin: '8px 0' }">
                        <cn-dict-select-tag  :options="{value:'dictDataCode',label:'dictDataDesc'}"
                                         dictCode="retail_system"
                                         v-model="params.kaCode" style='width: 90%'  @input='getData'/>
                    </a-col>
                    <a-col :sm="24" :md="6" :xl="6" :style="{ margin: '8px 0' }">
                        <div>
                            <a-checkable-tag :checked="params.change==1" @change="handleMtdChange(1)">
                              MTD
                            </a-checkable-tag>
                            <a-checkable-tag :checked="params.change==2" @change="handleMtdChange(2)">
                              YTD
                            </a-checkable-tag>
                        </div>
                    </a-col>
                    <a-col :sm="24" :md="13" :xl="13" :style="{ margin: '8px 0',textAlign:'right' }">
                        <div>
                            <a-checkable-tag :checked="params.formatLabel.includes('大业态')" @change="onChange('大业态')">
                              大业态
                            </a-checkable-tag>
                            <a-checkable-tag :checked="params.formatLabel.includes('小业态')" @change="onChange('小业态')">
                              小业态
                            </a-checkable-tag>
                            <a-checkable-tag :checked="params.formatLabel.includes('传统业态')" @change="onChange('传统业态')">
                              传统业态
                            </a-checkable-tag>
                            <a-checkable-tag :checked="params.formatLabel.includes('新业态')" @change="onChange('新业态')">
                              新业态
                            </a-checkable-tag>
                        </div>
                    </a-col>
              </a-row>
            </a-card>

            <div style='margin-bottom: 12px'></div>

            <a-row :gutter="24" justify="center">
                <a-col :sm="24" :md="8" :xl="8" :style="{ marginBottom: '12px' }">
                    <ChartCardYl :num="(headData['汇总'].posTotal||0)+'MM'" bgColor='#4D90FE' :tips="(params.change==2?'YTD':'MTD')+'  POS总量'" :icon="require('@/assets/1.png')"></ChartCardYl>
                </a-col>
                <a-col :sm="24" :md="8" :xl="8" :style="{ marginBottom: '12px' }">
                    <ChartCardYl :num="(headData['汇总'].posGrowthRate||0)+'%'" bgColor='#FF4400' color='#e74c3c' :tips="(params.change==2?'YTD':'MTD')+'  POS增长率'" :icon="require('@/assets/2.png')"></ChartCardYl>
                </a-col>
                <a-col :sm="24" :md="8" :xl="8" :style="{ marginBottom: '12px' }">
                    <ChartCardYl :num="(headData['汇总'].frontDesk||0)+'%'" bgColor='#39CC75' color='#00DB00' :tips="(params.change==2?'YTD':'MTD')+'  前台毛利'" :icon="require('@/assets/3.png')"></ChartCardYl>
                </a-col>
            </a-row>

            <a-card  :bordered="false" :body-style="{padding: '12px'}">
                <a-row :gutter="12" type="flex" justify="center">
                    <a-col  :sm="24" :md="{span:'4-8'}" :xl="{span:'4-8'}">
                        <a href='#pstup' class='tabs'>
                            <img :src="require('@/assets/index-1.png')" alt='' class='tabs-img'>
                            <div class='tabs-text'> POS增长 </div>
                        </a>
                    </a-col>
                    <a-col  :sm="24" :md="{span:'4-8'}" :xl="{span:'4-8'}">
                        <a href='#stock' class='tabs'>
                            <img :src="require('@/assets/index-2.png')" alt='' class='tabs-img'>
                            <div class='tabs-text'> 库存 </div>
                        </a>
                    </a-col>
                    <a-col  :sm="24" :md="{span:'4-8'}" :xl="{span:'4-8'}">
                        <a href='#reach' class='tabs'>
                            <img :src="require('@/assets/index-3.png')" alt='' class='tabs-img'>
                            <div class='tabs-text'> 达成情况 </div>
                        </a>
                    </a-col>
                    <a-col  :sm="24" :md="{span:'4-8'}" :xl="{span:'4-8'}">
                        <a href='#newShop' class='tabs'>
                            <img :src="require('@/assets/index-4.png')" alt='' class='tabs-img'>
                            <div class='tabs-text'> 新品铺市率 </div>
                        </a>
                    </a-col>
                    <a-col  :sm="24" :md="{span:'4-8'}" :xl="{span:'4-8'}">
                        <a href='#delivery' class='tabs'>
                            <img :src="require('@/assets/index-5.png')" alt='' class='tabs-img'>
                            <div class='tabs-text'> 产品送达率  </div>
                        </a>
                    </a-col>
                </a-row>
            </a-card>

            <div style='margin-bottom: 12px'></div>

            <a-row id='pstup'>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                    <e-chars :data='posData.posVoList' @export="(e)=>downExportXls(e)"></e-chars>
                </a-col>
            </a-row>
            <a-row id='pstupter'>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                    <pos-term-up-chars :data='posData.posTerVoList' @export="(e)=>downExportXls(e)"></pos-term-up-chars>
                </a-col>
            </a-row>
            <a-row :gutter="12" id='stock'>
                <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                    <stock-chars :data='stockData' @export="(e)=>downExportXls(e)"></stock-chars>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                    <abnormal-stock-charts :data='stockData' @export="(e)=>downExportXls(e)"></abnormal-stock-charts>
                </a-col>
            </a-row>
            <a-row id='reach'>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                    <ReachChars :data='achievementData' @export="(e)=>downExportXls(e)"></ReachChars>
                </a-col>
            </a-row>
            <a-row id='newShop'>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                    <new-shop-charts :data="newProductsData" @export="(e)=>downExportXls(e)"></new-shop-charts>
                </a-col>
            </a-row>

            <a-row id=''>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card :bordered="false" :body-style="{padding: '0',boxSizing: 'border-box'}" style='border-radius: 8px;margin-bottom: 12px;'>
                        <div class='big-box' >
                            <a-row>
                                <a-col :xl="8" :lg="8" :md="8" :sm="8" :xs="8">
                  <!--                <div class='title-text'> POST增长分析 </div>-->
                                </a-col>
                                <a-col :xl="16" :lg="16" :md="16" :sm="16" :xs="16" style='text-align: right'>
                                    <a-button type="primary"  @click="downExportXls('ka_order_shop_service')" > 导出 </a-button>
                                </a-col>
                            </a-row>
                            <div class='border-bottom'></div>
                            <div style='margin: 24px'>
                                <a-table
                                  ref="table"
                                  size="mini"
                                  :scroll="{x:'max-content'}"
                                  rowKey="type"
                                  :columns="columns"
                                  :pagination="ipagination"
                                  :dataSource="dataSource"
                                  @change="handleTableChange"
                                />
                            </div>
                        </div>
                    </a-card>
                </a-col>
            </a-row>

            <a-row id='delivery'>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card :bordered="false" :body-style="{padding: '0',boxSizing: 'border-box'}" style='border-radius: 8px;margin-bottom: 12px;'>
                        <div class='big-box' >
                            <a-row>
                                <a-col :xl="8" :lg="8" :md="8" :sm="8" :xs="8">
                                  <!--                <div class='title-text'> POST增长分析 </div>-->
                                </a-col>
                                <a-col :xl="16" :lg="16" :md="16" :sm="16" :xs="16" style='text-align: right'>
                                    <a-button type="primary"  @click="downExportXls('ka_order_delivery_service')" > 导出 </a-button>
                                </a-col>
                            </a-row>
                            <div class='border-bottom'></div>
                            <div style='margin: 24px'>
                                <a-table
                                  ref="table"
                                  size="mini"
                                  :scroll="{y:500}"
                                  rowKey="type"
                                  :pagination='false'
                                  :columns="productColumns"
                                  :dataSource="productData"
                                />
                            </div>
                        </div>
                    </a-card>
                </a-col>
            </a-row>

      <!--    <a-card :loading="loading" :bordered="false" :body-style="{padding: '12px'}">-->
      <!--      <div class="salesCard">-->
      <!--        <a-tabs default-active-key="1" size="small" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" :active-key="activeKey"-->
      <!--                @change="handleTabChange">-->
      <!--          <a-tab-pane loading="true" tab="" key="1">-->

      <!--          </a-tab-pane>-->
      <!--          <a-tab-pane tab="" key="2">-->
      <!--            <a-row>-->
      <!--              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">-->
      <!--               <stock-chars></stock-chars>-->
      <!--               <abnormal-stock-charts></abnormal-stock-charts>-->
      <!--              </a-col>-->
      <!--            </a-row>-->
      <!--          </a-tab-pane>-->
      <!--          <a-tab-pane tab="" key="3">-->
      <!--            <a-row>-->
      <!--              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">-->
      <!--              <ReachChars></ReachChars>-->
      <!--              </a-col>-->
      <!--            </a-row>-->
      <!--          </a-tab-pane>-->
      <!--          <a-tab-pane tab="" key="4">-->
      <!--            <a-row>-->
      <!--              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">-->
      <!--              <new-shop-charts></new-shop-charts>-->
      <!--              </a-col>-->
      <!--            </a-row>-->
      <!--          </a-tab-pane>-->
      <!--          <a-tab-pane tab="" key="5">-->
      <!--            <a-row>-->
      <!--              <a-col :xl="16" :lg="16" :md="16" :sm=18 :xs="22" :offset='2' style='padding-bottom:24px '>-->
      <!--                <a-table-->
      <!--                  ref="table"-->
      <!--                  bordered-->
      <!--                  size="middle"-->
      <!--                  :scroll="{y:500}"-->
      <!--                  rowKey="productCode"-->
      <!--                  :pagination='false'-->
      <!--                  :columns="productColumns"-->
      <!--                  :dataSource="productData"-->
      <!--                >-->
      <!--                   <span slot="productDelivery" slot-scope="text, record">-->
      <!--                   <span :style='{color:text>0?"#0AF616":"#FD2500" }'>{{text}}%</span>-->
      <!--                   </span>-->
      <!--                </a-table>-->
      <!--              </a-col>-->
      <!--            </a-row>-->
      <!--          </a-tab-pane>-->
      <!--        </a-tabs>-->
      <!--      </div>-->
      <!--    </a-card>-->

          <a-icon v-if=topShow type="up-circle" theme="filled" class='top' @click="goPages()"/>
        </div>
    </a-spin>
</template>

<script>
import {filterObj} from '@/utils/util';
import ChartCard from '@/components/ChartCard'
import ChartCardYl from '@/components/graph-chars/ChartCardYl'
import eChars from '@/components/graph-chars/eChars'
import PosTermUpChars from '@/components/graph-chars/PosTermUpChars'
import ReachChars from '@/components/graph-chars/ReachChars'
import StockChars from '@/components/graph-chars/StockChars'
import NewShopCharts from '@/components/graph-chars/NewShopCharts'
import AbnormalStockCharts from '@/components/graph-chars/AbnormalStockCharts'
import {getAction, postAction} from "@api/manage";
import { clearInterval, setInterval } from 'timers'
import { PageListMixin } from '@/mixins/PageListMixin'


export default {
  name: "IndexRecover",
  mixins:[PageListMixin],
  components: {
    ChartCardYl,
    eChars,
    PosTermUpChars,
    ReachChars,
    StockChars,
    AbnormalStockCharts,
    NewShopCharts
  },
  data() {
    return {
      disableMixinCreated:true,
      topShow:false,
      value: 'a',
      dataType: 4,
      activeKey: '1',
      loading: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin/>,
      columns:[
        {
          title: '新品条码',
          dataIndex: 'productCode',
        },
        {
          title: '新品名称',
          dataIndex: 'productName',

        },
        {
          title: '铺市率',
          dataIndex: 'marketRate',
          customRender: (r, t, index) => {
            let child =(r||0) + '%'
            return child
          }
        }],
      productColumns:[
        {
          title: '新品条码',
          dataIndex: 'productCode',
        },
        {
          title: '新品名称',
          dataIndex: 'productName',
        },
        {
          title: '送达率',
          dataIndex: 'productDelivery',
          customRender: (r, t, index) => {
            let child =(r||0) + '%'
            return child
          }
        }],
      productData:[],
      headData:{
        '汇总':{}
      },
      posData:{
        posVoList:[],
        posTerVoList:[]
      },
      stockData:[],
      dataSource:[],
      achievementData:[],
      newProductsData:[],
      url:{
        // 产品送达
        productDelivery:window._CONFIG['domianKaURL'] + '/kaOrderProductDelivery/getDelivery',
        posHead:window._CONFIG['domianKaURL'] + '/pc/kaPosReportPc/findListPosGrowthHeadPc',
        posGrowth:window._CONFIG['domianKaURL'] + '/pc/kaPosReportPc/findListPosGrowthPc',
        stock:window._CONFIG['domianKaURL'] + '/pc/kaStockReportPc/findListStockPc',
        achievement:window._CONFIG['domianKaURL'] + '/pc/achievementReport/findListAchievementPc',
        newProducts:window._CONFIG['domianKaURL'] + '/pc/newProductsReport/findListNewProductsPc',
        list:window._CONFIG['domianKaURL'] + '/pc/newProductsReport/findPageListNewProductsPc'

      },
      params:{
        kaCode:'苏果',
        change:1,
        formatLabel:[],
        permflag:'ka_home'
      }
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    window.addEventListener("scroll",this.handleScroll);
  },
  destroyed() {
    document.removeEventListener('scroll', this.handleScroll)
  } ,
  methods: {
    handleTabChange(e){
      this.activeKey=e
    },

    getQueryParams() {
      var param = Object.assign(this.queryParam, this.isorter, this.filters,this.searchOn,this.params);
      param.field = this.getQueryField();
      param.current = this.ipagination.current;
      param.size = this.ipagination.pageSize;
      return filterObj(param);
    },

    onChange(value) {
      let {
        formatLabel = []
      } = this.params
      let index = formatLabel.findIndex(v => v == value)
      index == -1 ? formatLabel.push(value) : formatLabel.splice(index, 1)
     this.$set(this.params,'formatLabel',formatLabel)
     this.getData()

    },
    //获取产品送达数据
    getProductDelivery(){
      this.loading=true
      postAction(this.url.productDelivery,this.params).then(res=>{
        if(res.success){
            this.productData=res.result
        }else {
          this.$message.error(res.message)
        }
      })
    },
    //posHead
    findListPosGrowthHeadPc(){
      this.loading=true
      postAction(this.url.posHead,this.params).then(res=>{
        if(res.success){
          this.headData=res.result
        }else {
          this.$message.error(res.message)
        }
      }).finally(()=>{
        this.loading=false
      })
    },

    findListPosGrowthPc(){
      postAction(this.url.posGrowth,this.params).then(res=>{
        if(res.success){
          this.posData=res.result
        }else {
          this.$message.error(res.message)
        }
      })
    },

    findListStockPc(){
      postAction(this.url.stock,this.params).then(res=>{
        if(res.success){
          this.stockData=res.result
        }else {
          this.$message.error(res.message)
        }
      })
    },

    findListAchievementPc(){
      postAction(this.url.achievement,this.params).then(res=>{
        if(res.success){
          this.achievementData=res.result
        }else {
          this.$message.error(res.message)
        }
      })
    },

    findListNewProductsPc(){
      postAction(this.url.newProducts,this.params).then(res=>{
        if(res.success){
          this.newProductsData=res.result
        }else {
          this.$message.error(res.message)
        }
      })
    },


    getData(){
      this.getProductDelivery()
      this.findListPosGrowthHeadPc()
      this.findListPosGrowthPc()
      this.findListStockPc()
      this.findListAchievementPc()
      this.findListNewProductsPc()
      this.loadData(1)
    },
    handleMtdChange(value){
      this.params.change=value
      this.getData()
    },
    goPages(){
      let scrollTop = document.documentElement.scrollTop === 0 ? document.body.scrollTop : document.documentElement.scrollTop;
      let interval = setInterval(() => {
        if (scrollTop > 0) {
          scrollTop -= 100;
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
        } else {
          clearInterval(interval);
        }
      }, 20);
    },
    handleScroll() {
      //获取滚动时的高度
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 400) {
        //大于200的时候要做的操作
        this.topShow=true
      }else {
        this.topShow=false
      }
    }


  }
}
</script>

<style lang="less" scoped>

 /deep/.ant-tag{
   padding: 5px 24px;
   font-size: 14px;
   margin-right:12px;

 }
 /deep/.ant-tag-checkable{
   border: 1px solid #d9d9d9;
 }
 /deep/.ant-tag-checkable-checked{
   border-color: transparent;
 }
 .tabs{
   box-sizing: border-box;
   padding-top: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   //width: 180px;
   height: 120px;
   background: #ffffff;
   border-radius: 8px;
   box-shadow: 0px 1px 10px 0px rgba(25,153,252,0.20);
 }
 .tabs-img{
   width: 4em;
   height: 2em;
 }
 .tabs-text{
   margin-top: 20px;
   font-size: 16px;
   font-family: Roboto, Roboto-Regular;
   font-weight: 400;
   text-align: left;
   color: #191a1a;
 }
 /deep/.ant-col-md-4-8 {
   width: 20%;
 }

 /deep/.ant-col-xl-4-8 {
   width: 20%;
 }

 .top{
   position: fixed;
   bottom: 100px;
   right: 40px;
   font-size:40px;
   z-index:9999999;
 }
 /deep/ #components-back-top-demo-custom .ant-back-top-inner {
   height: 40px;
   width: 40px;
   line-height: 40px;
   border-radius: 4px;
   background-color: #1088e9;
   color: #fff;
   text-align: center;
   font-size: 20px;
 }

 .big-box{
   box-sizing: border-box;
   //border-bottom: 4px solid #EEF1F4;
   padding: 12px;

 }
 .title-text{
   font-size: 16px;
   font-family: PingFang SC, PingFang SC-Semibold;
   font-weight: 600;
   text-align: left;
   color: #191a1a;
 }
 .border-bottom{
   margin-top: 2px;
   width: 100%;
   height: 1px;
   border: 1px solid #f5f5f5;
 }

</style>
